<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>

        window.onload=function (){
            cutAll(1)
        }


        function  cutAll(pageNO){
            axios.get("/role/cutAll",{
                params:{
                    pageNO
                }
            }).then( e=>{
                var info=e.data;
                var str="";
                for (var i=0;i<info.records.length;i++){
                    var obj=info.records[i];
                    str += `<tr><td>${obj.name}</td><td><a href="javascript:del(${obj.id})">删除角色</a><a href="/role/select.html?id=${obj.id}">查看权限</a><<a href="/role/update.html?id=${obj.id}">修改权限</a></td></tr>`
                }
                $("roleDate").innerHTML=str

                var pageStr="";
                for(var i=1;i<=info.pages;i++){
                    pageStr +=  `<a href="javascript:cutAll(${i})">${i}`
                }
                $("cutPageDiv").innerHTML=pageStr;

            });

        }

        function  del(id){
            axios.get("/role/del",{
                params: {id}
            }).then(e =>{
                if (e.data=="ok"){
                    cutAll(1)
                }
            })
        }
    </script>
</head>
<body>
<h2>角色管理</h2>
<table border="1" width="90%" cellspacing="0">
    <thead>
    <tr><td>角色名称</td><td>操作</td></tr>
    </thead>
    <tbody id="roleDate"></tbody>
</table>
<div style="margin: 10px;" id="cutPageDiv"></div>
<div style="display: flex">
    <div style="width: 300px;">
        <a href="/role/add.html">添加角色</a>
    </div>
</div>

</body>
</html>